{include file="public/head"/}
<div id="main">
    <div class="container-fluid">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="alert alert-dismissable alert-info" id="headeralert">
                    <button type="button" class="close">×</button>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="ntDesktop">
            <div class="ntDesktop-head">{:strtoupper(lang('container_list'))}</div>
            <div class="col-md-6">
                <ul class="nav nav-tabs">
                    <li :class="{'active':status==null}">
                        <a href="#" data-toggle="tab" @click.prevent="statuschange('')">{:strtoupper(lang('all'))}</a>
                    </li>
                    <li :class="{'active':status==1}">
                        <a href="#" data-toggle="tab" @click.prevent="statuschange(1)">{:strtoupper(lang('prepare'))}</a>
                    </li>
                    <li :class="{'active':status==2}">
                        <a href="#" data-toggle="tab" @click.prevent="statuschange(2)">{:strtoupper(lang('loading_container'))}</a>
                    </li>
                    <li :class="{'active':status==3}">
                        <a href="#" data-toggle="tab" @click.prevent="statuschange(3)">{:strtoupper(lang('departures'))}</a>
                    </li>
                    <li :class="{'active':status==4}">
                        <a href="#" data-toggle="tab" @click.prevent="statuschange(4)">{:strtoupper(lang('arrive'))}</a>
                    </li>
                    <li :class="{'active':status==5}">
                        <a href="#" data-toggle="tab" @click.prevent="statuschange(5)">{:strtoupper(lang('finish'))}</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-6 text-right">
                <div>
                    {in name="224" value="$Think.session.admin.auth_ids"}
                    <a v-if="status==1 || status==2" href="#" class='btn btn-primary' data-toggle="modal" stytle="margin-right:20px" @click="banckchangestatus"><span class="glyphicon glyphicon-pencil"></span> {:strtoupper(lang('change_status_in_batch'))}</a>
                    {/in}
                    {in name="219" value="$Think.session.admin.auth_ids"}
                    <a href="/admin/logistics/containeradd" class='btn btn-primary' data-toggle="modal"
                       data-target="#container_addModal"
                       stytle="margin-right:20px"> <span class="glyphicon glyphicon-plus"></span> {:strtoupper(lang('add_new_container'))}</a>
                    {/in}
                </div>
            </div>


            <div class="row clearfix">
                <div class="col-md-12 column">
                    <table class="table table-striped table-hover ntTable containerindex">
                        <thead>
                        <tr>
                            <th style="text-align:center"><input type="checkbox" @click="allsel" /> </th>
                            <th class="sorting" @click="sortfun(1,'id')">{:strtoupper(lang('serial_number'))}  </th>
                            <th> {:strtoupper(lang('name/type'))} </th>
                            <th> {:strtoupper(lang('place_of_departure'))} </th>
                            <th>{:strtoupper(lang('destination'))}  </th>
                            <th class="sorting"  @click="sortfun(1,'arrival_day')">{:strtoupper(lang('status'))}</th>
                            <th> {:strtoupper(lang('carrier/SO'))} </th>
                            <th> {:strtoupper(lang('container_number/seal_number'))} </th>
                            <th> {:strtoupper(lang('container_content'))} </th>
                            <th> {:strtoupper(lang('goods_value'))} </th>
                            <th class="sorting"  @click="sortfun(1,'update_at')"> {:strtoupper(lang('edit'))} </th>
                            <th style="min-width: 600px;"> {:strtoupper(lang('operate'))} </th>
                        </tr>
                        </thead>
                        <tbody>
                        <template v-for="(item,index) in listdata" >
                            <tr class="tr-mid">
                                <td colspan="3">{{item.date}}</td>
                                <td colspan="9" align="right">
                                    货柜数量：{{formatUnit(item.sum_ctn,'UN')}} <span class="unit">UN</span>
                                    {neq name='Request.session.admin.position_id' value='65'}，
                                    {:lang("goods_value")} {{formatUnit(item.sum_value,'CNY')}} <span class="unit">CNY</span>
                                    {/neq}
                                </td>
                            </tr>
                            <tr v-for="(element,index) in item.val" :key="element.id">
                                <td align="center"><input type="checkbox" @click="onesel(element.id)"  /></td>
                                <td> {{formatUnit(element.id,'ID')}}<br>  {{element.code}} </td>
                                <td> {{element.name}} <br> {{element.container_type_name}}</td>
                                <td> {{element.port_start_name}} <br> {{element.agent_start_name}}</td>
                                <td> {{element.port_arrival_name}} <br> {{element.agent_arrival_name}} </td>
                                <td> {{element.status_time}} <br> {{element.status}} </td>
                                <td> {{element.carriername!='' ? element.carriername:'-'}} <br> {{element.so_no!='' ? element.so_no:'-'}} </td>
                                <td> {{element.container_no!='' ? element.container_no:'-'}} <br> {{element.seal_no!='' ? element.seal_no:'-'}} </td>
                                <td align="right">
                                    {{formatUnit(element.sum_kgs!=undefined ? element.sum_kgs:'-','KGS')}} <span class="unit">KGS</span> <br>
                                    {{formatUnit(element.sum_cbm!=undefined ? element.sum_cbm:'-','CBM')}} <span class="unit">CBM</span>
                                </td>
                                <td align="right">
                                    {{formatUnit(element.sum_ctn!=undefined ? element.sum_ctn:'-','CTN')}} <span class="unit">CTN</span><br>
                                    {neq name='Request.session.admin.position_id' value='65'}
                                    {{formatUnit(element.sum_value!=undefined ? element.sum_value:'-','CNY')}} <span class="unit">CNY</span>
                                    {/neq}
                                </td>
                                <td> {{element.mangname}} <br /><small> {{element.update_date}} </small></td>
                                <td class="text-right">
                                    <div>
                                        {in name="361" value="$Think.session.admin.auth_ids"}
                                        <a :href="'/admin/logistics/containerdetail?id='+element.id" @click="gotocontainer" class='btn btn-sm btn-primary' ><span class="fa fa-search-plus"></span> {:strtoupper(lang('details'))}</a>
                                        {/in}
                                        {in name="223" value="$Think.session.admin.auth_ids"}
                                        <a :href="'/admin/logistics/containeredit?id='+element.id" class='btn btn-sm btn-primary' data-toggle="modal" data-target="#container_editModal"><span class="glyphicon glyphicon-pencil"></span> {:strtoupper(lang('edit'))}</a>
                                        {/in}

                                        {in name="360" value="$Think.session.admin.auth_ids"}
                                        <!--空货柜不显示打印-->
                                        <button @click="dayindata($event)" v-if="element.sum_ctn" class='btn btn-sm btn-primary' :data-container_id="element.id" data-toggle="modal" data-target="#print_settingModal">
                                            <span class="fa fa-print"></span> {:strtoupper(lang('print'))}
                                        </button>
                                        {/in}

                                        {in name="228" value="$Think.session.admin.auth_ids"}
                                        <!--准备下状态下显示删除-->
                                        <a v-if="element.status=='READY'" href="#" class='btn btn-sm btn-default option-del' @click="apifun('containerdel',4,element.id,element.name)"><span class="glyphicon glyphicon-trash"></span>{:strtoupper(lang('delete'))}</a>
                                        {/in}
                                        {in name="225" value="$Think.session.admin.auth_ids"}
                                        <!--装柜状态下显示开航-->
                                        <a v-if="element.status=='LOADING'" href="#" class='btn btn-sm btn-primary' @click="apifun('etdday',1,element.id,element.name)"><span class="fa fa-ship"></span>{:strtoupper(lang('set_sail'))}</a>
                                        {/in}
                                        {in name="226" value="$Think.session.admin.auth_ids"}
                                        <!--出发状态下显示 到港，取消开航-->
                                        <a v-if="element.status=='SALLING'" href="#" class='btn btn-sm btn-primary' @click="apifun('etaday',2,element.id,element.name)"><span class="fa fa-shipping-fast"></span>{:strtoupper(lang('arrived_at_the_port'))}</a>
                                        {/in}

                                        {in name="225" value="$Think.session.admin.auth_ids"}
                                        <a v-if="element.status=='SALLING'" href="#" class='btn btn-sm btn-primary' @click="apifun('etdday',11,element.id,element.name)">{:strtoupper(lang('cancel_sail'))}</a>
                                        {/in}

                                        {in name="361" value="$Think.session.admin.auth_ids"}
                                        <!--到达状态下显示入仓，取消到港-->
                                        <a v-if="element.status=='ARRIVE'" :href="'/admin/logistics/containerdetail?id='+element.id" class='btn btn-sm btn-primary' @click="gotocontainer"><span class="fa fa-dolly"></span>{:strtoupper(lang('storage'))}</a>
                                        {/in}

                                        {in name="226" value="$Think.session.admin.auth_ids"}
                                        <a v-if="element.status=='ARRIVE'" href="#" class='btn btn-sm btn-primary' @click="apifun('etaday',22,element.id,element.name)">{:strtoupper(lang('cancel_arrival'))}</a>
                                        {/in}
                                        <!--完成状态下显示取消入仓-->
                                        <!--<a v-if="element.status=='DISCHARGE'" href="#" class='btn btn-sm btn-primary' @click="apifun('arrivalday',33,element.id,element.name)">{:strtoupper(lang('cancel_storage'))}</a>-->
                                        <a v-if="element.status=='DISCHARGE'" href="#" class='btn btn-sm btn-primary'>已入仓</a>
                                    </div>
                                </td>
                            </tr>
                        </template>
                        <tr style="text-align: center;"  v-if="listdata.length==0">
                            <td colspan="12" class="no_date">{:strtoupper(lang('no_data'))}</td>
                        </tr>
                        </tbody>
                    </table>
                    <ul class="pagination" id="pagination" v-show="listdata.length!=0">
                    </ul>
                    <input type="hidden" id="msg" value="请选择要批量操作的内容">
                </div>
            </div>
        </div>
    </div>
    <!-- 货柜打印设置-->
    <div class="modal fade" id="print_settingModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content" style="width:1000px">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="ntModalLabel9">货柜打印设置</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="alert alert-dismissable alert-info">
                                <button type="button" class="close">×</button>
                                <h4> 信息框 </h4>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <table class="table table-hover ntTable">
                                <tbody>
                                <tr>
                                    <td class="col-md-2">语言<span class="required"></span></td>
                                    <td>
                                        <select class="form-control" v-model="dayin.langname">

                                            <option :value="item.code" v-for="(item,index) in langs">{{item.name}}</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="col-md-3">显示字体</td>
                                    <td>
                                        <label class="radio-inline">
                                            <input type="radio" v-model="dayin.fontSize" value="1"> 小
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" v-model="dayin.fontSize"  value="2" checked> 中
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" v-model="dayin.fontSize"  value="3"> 大
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>产品图片</td>
                                    <td>
                                        <label class="radio-inline">
                                            <input type="radio" v-model="dayin.iconSize" value="1"> 不显示
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" v-model="dayin.iconSize" value="2" checked> 40x40px
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" v-model="dayin.iconSize" value="3"> 60x60px
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" v-model="dayin.iconSize" value="4"> 80x80px
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>分隔</td>
                                    <td>
                                        <label class="radio-inline">
                                            <input type="radio" v-model="dayin.separate" value="0"> 不显示
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" v-model="dayin.separate" value="1" checked> 显示采购单号/供应商/合计
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" v-model="dayin.separate" name="" value="2"> 显示采购单号/合计（不显示供应商）
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>排序</td>
                                    <td>
                                        <label class="radio-inline">
                                            <input type="radio" v-model="dayin.sort" value="1" checked> 默认（以品牌，型号和名称排序）
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" v-model="dayin.sort" value="2"> 以采购单的时间
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" v-model="dayin.sort" value="3"> 以产品的分类
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>内容设置</td>
                                    <td>
                                        <div class="checkbox">
                                            <label><input type="checkbox" v-model="dayin.selectdata" value="1" >显示货柜ID</label>
                                        </div>
                                        <div class="checkbox">
                                            <label><input type="checkbox" v-model="dayin.selectdata" value="2" >显示货贷资料</label>
                                        </div>
                                        <div class="checkbox">
                                            <label><input type="checkbox" v-model="dayin.selectdata" value="3" >显示产品采购数量</label>
                                        </div>
                                        <div class="checkbox">
                                            <label><input type="checkbox" v-model="dayin.selectdata" value="4" >显示产品采购价格</label>
                                        </div>
                                        <div class="checkbox">
                                            <label><input type="checkbox" v-model="dayin.selectdata" value="5"
                                                          >显示产品CIF价格</label>
                                        </div>
                                        <div class="checkbox">
                                            <label><input type="checkbox" v-model="dayin.selectdata" value="6" >显示货柜备注内容</label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>输出格式</td>
                                    <td>
                                        <label class="radio-inline">
                                            <input type="radio" v-model="dayin.format" value="1" checked> 网页
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" v-model="dayin.format" value="2"> EXCEL
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" v-model="dayin.format" value="3"> PDF
                                        </label>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>取消</button>

                    <button class="btn btn-info" @click="dayindatares" style="padding-left:24px;padding-right:24px"><span
                            class="fa fa-print"></span>打印
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
<!--添加弹窗部分 开始-->
<div class="modal fade" id="container_addModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 货柜编辑 结束-->
<div class="modal fade" id="container_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 改变状态 开始-->
<div class="modal fade" id="container_batModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script src="/static/Admin/js/container.js"></script>
{include file="public/foot"/}



